<template>
  <div class="departments">
    <el-card class="mycard">
      <el-tabs v-model="activeName">
        <el-tab-pane label="组织架构" name="first"></el-tab-pane>
      </el-tabs>
      <!-- 内容结构 -->
      <div class="box">
        <!-- 头部 -->
        <!-- <el-row class="myborder">
          <el-col class="left" :span="18">
            <i class="el-icon-s-home"></i>
            <span>江苏传智播客</span>
          </el-col>
          <el-col class="right" :span="6">
            <span>负责人</span>
            <el-dropdown>
              <span class="el-dropdown-link">
                操作<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>添加子部门</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row> -->
        <treeTools class="myborder" :item="headData"></treeTools>
        <!-- 内容 -->
        <el-tree class="mytree" :data="data" default-expand-all>
          <treeTools 
          slot-scope="{ data }" 
          :item="data" 
          @updatedata="getDeptData"
          @addShow="addShow"></treeTools>
        </el-tree>
      </div>
    </el-card>
    <addDept :dialogShow="dialogShow" :id="currentId"></addDept>
  </div>
</template>

<script>
import { getDeptApi } from '@/api/departments'
export default {
  data () {
    return {
      activeName: 'first',
      data: [],
      headData: {},
      dialogShow:false,
      currentId: ''
    }
  },
  created () {
    this.getDeptData()
  },
  methods: {
    //打开新增弹窗
    addShow(id){
      this.dialogShow = true
      this.currentId = id
    },
    //定义转换数据的嵌套树状结构
    trunData (arr, pid) {
      var res = []
      arr.forEach(item => {
        if (item.pid == pid) {
          var son = this.trunData(arr, item.id)
          item.children = son
          res.push(item)
        }
      })
      return res
    },
    //定义获取数据的方法
    async getDeptData () {
      const res = await getDeptApi()
      // console.log(res)
      this.data = this.trunData(res.data.depts, '')
      this.headData = res.data.depts[0]
      this.headData.manager = '负责人'
      this.headData.isTop = true
    }
  },
  components: {
    treeTools: () => import('./components/tree-tools.vue'),
    addDept: ()=>import('./components/add-dept.vue')
  }
}
</script>

<style lang="scss">
.departments {
  margin: 20px;
  .mycard {
    padding: 40px;
    .box {
      padding: 30px 60px;
      .myborder {
        border-bottom: 1px solid #ccc;
        line-height: 50px;
      }
      .mytree {
        margin-top: 10px;
      }
    }
  }
}
</style>
